<!--公共头部-->
{template 'aitimt/common/header'}
<style>
    * {touch-action: pan-y;}
    html,body{height: 100%;background: #fff}
    .mui-slider{z-index: 5;overflow: unset;}
    .head-banner .mui-slider-group .mui-slider-item img{width: 100%;max-height: 200px; min-height: 200px;}
    .mui-slider .mui-slider-group .mui-slider-item img{width: 100%;max-height: 200px;}
    .mui-content{background-color: #fff;}
    .mui-content-padded{float: left;width: 100%;margin: 2%;}
    .mui-content-padded p{margin: 2% 2% 0 2%;width: 44%;float: left;}
    .mui-slider-indicator.mui-segmented-control .mui-control-item {border-bottom: 1px solid rgba(0,0,0,0.05);line-height: 30px;padding: 1px;color: #585858;}
    .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0}
    .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
    .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 30%;display: -webkit-box;margin-left: 10%;background-color: #E94709;}
    .mui-content-padded img{height: 5rem;margin-bottom: 10px;}
    .mui-preview-image.mui-fullscreen {position: fixed;z-index: 20;background-color: rgba(0, 0, 0,1);}
    .mui-preview-header, .mui-preview-footer {position: absolute;width: 100%;left: 0;}
    .mui-preview-header {height: 44px;top: 0;}
    .mui-preview-footer {height: 50px;bottom: 0;}
    .mui-preview-header .mui-preview-indicator {display: block;line-height: 25px;color: #fff;text-align: center;margin: 15px auto 4px;width: 70px;background-color: rgba(0, 0, 0, 0.4);border-radius: 12px;font-size: 16px;}
    .mui-preview-image {display: none;-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .mui-preview-image.mui-preview-in {-webkit-animation-name: fadeIn;animation-name: fadeIn;}
    .mui-preview-image.mui-preview-out {background: none;-webkit-animation-name: fadeOut;animation-name: fadeOut;}
    .mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer {display: none;}
    .mui-zoom-scroller {position: absolute;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;left: 0;right: 0;bottom: 0;top: 0;width: 100%;height: 100%;margin: 0;-webkit-backface-visibility: hidden;}
    .mui-zoom {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
    .mui-slider .mui-slider-group .mui-slider-item img {height: auto;max-width: 100%;max-height: 200px;}
    .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {width: 100%;}
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {display: inline-table;}
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {display: table-cell;vertical-align: middle;}
    .mui-preview-loading {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: none;}
    .mui-preview-loading.mui-active {display: block;}
    .mui-preview-loading .mui-spinner-white {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;height: 50px;width: 50px;}
    .mui-preview-image img.mui-transitioning {-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;transition: transform 0.5s ease, opacity 0.5s ease;}
    @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
    @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
    @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
    @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
    p img {max-width: 100%;height: auto;}
    .photo-do{position: fixed!important;width: 100%;bottom: 0}
    .photo-do .mui-tab-item{display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: white;}
    .photo-do .mui-tab-item .mui-icon {font-size: 24px;position: relative;z-index: 20;top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0;}
    .photo-do .mui-tab-item .mui-icon~.mui-tab-label {font-size: 11px;display: block;overflow: hidden;text-overflow: ellipsis;}
    .photo-do .mui-active{color: #E94709}
</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
    <a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
    <a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
    <!--公共菜单start -->
    {template 'aitimt/common/menu'}
    <!-- 公共菜单end-->
</header>
<!-- 公共头部end -->
<div class="mui-slider head-banner">
    <div class="mui-slider-group mui-slider-loop">
        {loop array_reverse(unserialize($photo['atlas'])) $adv}
        <div class="slider-item mui-slider-item mui-slider-item-duplicate"><img src="{php echo tomedia($adv)}" /></div>
        {php break;}
        {/loop}
        {loop unserialize($photo['atlas']) $adv}
        <div class="slider-item mui-slider-item"><img src="{php echo tomedia($adv)}" /></div>
        {/loop}
        <!--支持循环，需要重复图片节点-->
        {loop unserialize($photo['atlas']) $adv}
        <div class="slider-item mui-slider-item mui-slider-item-duplicate"><img src="{php echo tomedia($adv)}" /></div>
        {php break;}
        {/loop}
    </div>
</div>
<div class="mui-content" style="padding-top: 0;">
    <div id="slider" class="mui-slider" style="margin: 0;">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background: #EEEEEE;">
            <a class="mui-control-item mui-active" href="#item1mobile">高清图片</a>
            <a class="mui-control-item" href="#item2mobile">精彩瞬间</a>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll">
                    <div class="mui-content-padded">

                        {loop $photoList['jpg'] $item}
                        <p>
                            <img src="{$item}" data-preview-src="" data-preview-group="2" />
                        </p>
                        {/loop}
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll">
                    <div class="mui-content-padded">

                        {loop $photoList['gif'] $item}
                        <p>
                            <img src="{$item}" data-preview-src="" data-preview-group="1" />
                        </p>
                        {/loop}
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="photo-do" id="photo-do" style="display: none">
    <a class="mui-tab-item" id="good" onclick="collect('good',this)">
        <span class="mui-icon iconfont icon-zan"></span>
        <span class="mui-tab-label">点赞</span>
    </a>
    <a class="mui-tab-item" id="collect" onclick="collect('collect',this)">
        <span class="mui-icon iconfont icon-shoucang"></span>
        <span class="mui-tab-label">收藏</span>
    </a>
    <a class="mui-tab-item" onclick="share(this)">
        <span class="mui-icon iconfont icon-fenxiang"></span>
        <span class="mui-tab-label">分享</span>
    </a>
    <a class="mui-tab-item" onclick="save(this)">
        <span class="mui-icon iconfont icon-xiazai"></span>
        <span class="mui-tab-label">下载</span>
    </a>
</div>

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=5WNBZ-2JYR6-SPUSL-M3WGH-U4KDT-K2FYV"></script>
<script type="text/javascript" src="{$aideUrl}app/resource/aitimt/js/mui.zoom.js?v=20170912"></script>
<script type="text/javascript" src="{$aideUrl}app/resource/aitimt/js/mui.previewimage.js?v=20170912"></script>
<script type="text/javascript">
    $(document).ready(function(){

    });
    //初始化点赞，收藏状态
    function initStatus(imgSrc) {
        var collect=document.getElementById('collect');
        var good=document.getElementById('good');
        $.ajax({
            type: 'post',
            url: "{php echo app_url('home/index/photostatus')}",
            data: {img_src:imgSrc},
            dataType: 'json',
            success: function(data){
                if (data.collect==1){
                    collect.classList.add('mui-active');
                }else {
                    collect.classList.remove('mui-active');
                }
                if(data.good==1){
                    good.classList.add('mui-active');
                }else {
                    good.classList.remove('mui-active');
                }
            },
            error: function(xhr, type){
            }
        });
    }
    function photoClose() {
        document.getElementById('photo-do').style='display:none';
    }
    function imgSrc(){
        var src='';
        mui(".mui-preview-image .mui-slider-group .mui-slider-item").each(function (i,val) {
            var name=this.className;
            if(name.indexOf('mui-active')!=-1){
                src= this.getElementsByTagName("img")[0].src;
                return false;
            }
        });
        return src;
    }
    function share(cc){
        cc.classList.remove('mui-active');
        mui.toast('点击右上角进行分享');
    }
    function save(cc) {
        cc.classList.remove('mui-active');
        mui.toast('长按保存图片');
    }
    function collect(type,cc){
        var src=imgSrc();
        var arr ={img_src:src,type:type};
        $.post("{php echo app_url('home/index/photoshow')}", arr, function(data){
            console.log(data);
            if(data.errno == 0){
                mui.toast(data.msg);
                cc.classList.remove('mui-active');
            }else{
                mui.toast(data.msg);
            }
        },"json");
    }
    mui.previewImage({zoom: false});
    mui('.mui-content-padded').on('tap','p',function(){
        mui.previewImage().close();
        if(document.getElementById('__MUI_PREVIEWIMAGE').style.display!='block'){
            document.getElementById('photo-do').style='display:block;z-index: 100';
        }
    });
    var slider = mui(".head-banner");
    slider.slider({
        interval: 5000
    });
    wx.ready(function(){
        // 分享朋友圈
        wx.onMenuShareTimeline({
            title:'{$photo["share_title"]}',
            link:'{$photo["share_link"]}'?'{$photo["share_link"]}':window.location.href,
            imgUrl:'{$photo["share_img"]}'?'{php echo tomedia($photo["share_img"]);}':'',
            success:function(){
                //发送成功的方法
                mui.toast('已分享');
            },
            cancel:function(){
                //发送取消的方法
                mui.toast('已取消');
            }
        });

// 分享给朋友
        wx.onMenuShareAppMessage({
            title:'{$photo["share_title"]}',
            desc:'{$photo["share_desc"]}',
            link:'{$photo["share_link"]}'?'{$photo["share_link"]}':window.location.href,
            imgUrl:'{$photo["share_img"]}'?'{php echo tomedia($photo["share_img"]);}':'',
            success:function(){
                //发送成功的方法
                mui.toast('已分享');
            },
            cancel:function(){
                //发送取消的方法
                mui.toast('已取消');
            }
        });
        wx.getLocation({ type: 'gcj02',
            success: function (res) {
                console.log(res.latitude);  //纬度
                console.log(res.longitude); //经度
                var geocoder = new qq.maps.Geocoder({
                    complete: function (result) {   //解析成功的回调函数
                        var address = result.detail.address;  //获取详细地址信息
                        console.log(address);

                    }
                });
                geocoder.getAddress(new qq.maps.LatLng(res.latitude, res.longitude));
            },
            fail: function (res) {
            },
            cancel: function (res) {
            }
        });
    })
</script>

</body>

</html>
